<template>
  <div class="shopping-cart">
    <div class="cart-header">
      <div class="header-title">
        <i class="fa fa-shopping-cart"></i>
        <span>购物车</span>
        <span class="item-count" v-if="cartItems.length > 0">({{ cartItems.length }})</span>
      </div>
      
      <div class="header-actions">
        <el-button 
          v-if="cartItems.length > 0" 
          type="danger" 
          size="small" 
          @click="$emit('clear-cart')"
        >
          <i class="fa fa-trash-o"></i> 清空
        </el-button>
      </div>
    </div>
    
    <div class="customer-section">
      <div class="customer-info" v-if="customer">
        <div class="customer-avatar">
          <i class="fa fa-user-circle"></i>
        </div>
        <div class="customer-details">
          <div class="customer-name">{{ customer.name }}</div>
          <div class="customer-meta">
            <span class="customer-phone">{{ customer.phone }}</span>
            <span class="customer-level" :class="getLevelClass(customer.level)">
              {{ customer.level }}
            </span>
          </div>
        </div>
        <div class="customer-points">
          <div class="points-value">{{ customer.points }}</div>
          <div class="points-label">积分</div>
        </div>
      </div>
      
      <el-button 
        v-else 
        class="select-customer-btn"
        type="info" 
        plain 
        @click="$emit('select-customer')"
      >
        <i class="fa fa-user-plus"></i> 选择客户
      </el-button>
    </div>
    
    <div class="cart-items" v-if="cartItems.length > 0">
      <div class="cart-item" v-for="item in cartItems" :key="item.id">
        <div class="item-image">
          <el-image 
            :src="getImageUrl(item.image)" 
            fit="cover" 
            :lazy="true"
          >
            <template #error>
              <div class="image-placeholder">
                <i class="fa fa-image"></i>
              </div>
            </template>
          </el-image>
        </div>
        
        <div class="item-info">
          <div class="item-name">{{ item.name }}</div>
          <div class="item-price">
            <span class="current-price">¥{{ formatPrice(item.price) }}</span>
            <span class="original-price" v-if="item.price !== item.originalPrice">
              ¥{{ formatPrice(item.originalPrice) }}
            </span>
          </div>
        </div>
        
        <div class="item-actions">
          <div class="quantity-control">
            <el-button 
              type="primary" 
              size="small" 
              circle 
              plain
              @click="updateQuantity(item.id, item.quantity - 1)"
              :disabled="item.quantity <= 1"
            >
              <i class="fa fa-minus"></i>
            </el-button>
            
            <span class="item-quantity">{{ item.quantity }}</span>
            
            <el-button 
              type="primary" 
              size="small" 
              circle 
              plain
              @click="updateQuantity(item.id, item.quantity + 1)"
            >
              <i class="fa fa-plus"></i>
            </el-button>
          </div>
          
          <el-button 
            type="danger" 
            size="small" 
            circle 
            plain
            @click="$emit('remove-item', item.id)"
          >
            <i class="fa fa-trash-o"></i>
          </el-button>
        </div>
      </div>
    </div>
    
    <el-empty 
      v-else 
      description="购物车为空" 
      :image-size="100"
    />
    
    <div class="cart-summary">
      <div class="summary-row">
        <span class="summary-label">商品金额</span>
        <span class="summary-value">¥{{ formatPrice(totalAmount) }}</span>
      </div>
      
      <div class="summary-row" v-if="discountAmount > 0">
        <span class="summary-label">折扣金额</span>
        <span class="summary-value discount">-¥{{ formatPrice(discountAmount) }}</span>
      </div>
      
      <div class="summary-row discount-row" v-if="customer">
        <span class="summary-label">会员折扣</span>
        <div class="discount-input">
          <el-input-number 
            v-model="discountValue" 
            :min="0" 
            :max="100" 
            size="small"
            @update:model-value="applyCustomDiscount"
          ></el-input-number>
          <span class="discount-unit">%</span>
        </div>
      </div>
      
      <div class="summary-divider"></div>
      
      <div class="summary-row total-row">
        <span class="summary-label">应付金额</span>
        <span class="summary-value total">¥{{ formatPrice(payableAmount) }}</span>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType, ref, watch } from 'vue'

interface CartItem {
  id: number;
  productId: number;
  name: string;
  price: number;
  originalPrice: number;
  quantity: number;
  image: string;
}

interface Customer {
  id: number;
  name: string;
  phone: string;
  level: string;
  discount: number;
  points: number;
}

export default defineComponent({
  name: 'ShoppingCart',
  props: {
    cartItems: {
      type: Array as PropType<CartItem[]>,
      required: true
    },
    customer: {
      type: Object as PropType<Customer | null>,
      default: null
    },
    totalAmount: {
      type: Number,
      required: true
    },
    discountAmount: {
      type: Number,
      required: true
    },
    payableAmount: {
      type: Number,
      required: true
    }
  },
  emits: [
    'update-quantity', 
    'remove-item', 
    'select-customer', 
    'apply-discount', 
    'clear-cart'
  ],
  setup(props, { emit }) {
    const discountValue = ref(0)
    
    // 监听客户变化，更新折扣值
    watch(() => props.customer, (newCustomer) => {
      if (newCustomer) {
        discountValue.value = newCustomer.discount
      } else {
        discountValue.value = 0
      }
    })
    
    // 格式化价格
    const formatPrice = (price: number) => {
      return price.toFixed(2)
    }
    
    // 获取商品图片URL
    const getImageUrl = (image: string) => {
      // 实际应用中，这里可能需要拼接完整的图片URL
      return image.startsWith('http') ? image : `https://picsum.photos/id/${Math.floor(Math.random() * 100)}/300/300`
    }
    
    // 获取会员等级样式类
    const getLevelClass = (level: string) => {
      const levelMap: Record<string, string> = {
        '普通会员': 'normal',
        '银卡会员': 'silver',
        '金卡会员': 'gold',
        '钻石会员': 'diamond',
        '至尊会员': 'platinum'
      }
      
      return levelMap[level] || 'normal'
    }
    
    // 更新商品数量
    const updateQuantity = (itemId: number, quantity: number) => {
      if (quantity < 1) return
      emit('update-quantity', itemId, quantity)
    }
    
    // 应用自定义折扣
    const applyCustomDiscount = (value: number | undefined) => {
      if (value !== undefined) {
        emit('apply-discount', value)
      }
    }
    
    return {
      discountValue,
      formatPrice,
      getImageUrl,
      getLevelClass,
      updateQuantity,
      applyCustomDiscount
    }
  }
})
</script>

<style scoped lang="scss">
.shopping-cart {
  display: flex;
  flex-direction: column;
  height: calc(90vh - 310px); /* 调整高度 = 90vh(容器高度) - 60px(顶部导航) - 250px(支付区域) */
  background-color: white;
  overflow: hidden;
  
  .cart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    border-bottom: 1px solid #ebeef5;
    
    .header-title {
      display: flex;
      align-items: center;
      font-size: 15px;
      font-weight: 500;
      
      i {
        margin-right: 8px;
        font-size: 16px;
        color: #409EFF;
      }
      
      .item-count {
        margin-left: 6px;
        color: #909399;
        font-weight: normal;
      }
    }
  }
  
  .customer-section {
    padding: 8px 15px;
    border-bottom: 1px solid #ebeef5;
    
    .customer-info {
      display: flex;
      align-items: center;
      
      .customer-avatar {
        margin-right: 10px;
        
        i {
          font-size: 32px;
          color: #409EFF;
        }
      }
      
      .customer-details {
        flex: 1;
        
        .customer-name {
          font-size: 14px;
          font-weight: 500;
          margin-bottom: 2px;
        }
        
        .customer-meta {
          display: flex;
          align-items: center;
          font-size: 12px;
          color: #606266;
          
          .customer-phone {
            margin-right: 10px;
          }
          
          .customer-level {
            padding: 1px 6px;
            border-radius: 10px;
            font-size: 10px;
            
            &.normal {
              background-color: #e1f3d8;
              color: #67c23a;
            }
            
            &.silver {
              background-color: #f2f6fc;
              color: #909399;
            }
            
            &.gold {
              background-color: #fdf6ec;
              color: #e6a23c;
            }
            
            &.diamond {
              background-color: #ecf5ff;
              color: #409EFF;
            }
            
            &.platinum {
              background-color: #f0f9eb;
              color: #67c23a;
            }
          }
        }
      }
      
      .customer-points {
        text-align: center;
        
        .points-value {
          font-size: 16px;
          font-weight: 500;
          color: #e6a23c;
        }
        
        .points-label {
          font-size: 10px;
          color: #909399;
        }
      }
    }
    
    .select-customer-btn {
      width: 100%;
      padding: 6px;
    }
  }
  
  .cart-items {
    flex: 1;
    overflow-y: auto;
    padding: 8px 15px;
    
    .cart-item {
      display: flex;
      margin-bottom: 10px;
      padding-bottom: 10px;
      border-bottom: 1px dashed #ebeef5;
      
      &:last-child {
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: none;
      }
      
      .item-image {
        width: 50px;
        height: 50px;
        margin-right: 10px;
        border-radius: 4px;
        overflow: hidden;
        
        .el-image {
          width: 100%;
          height: 100%;
        }
        
        .image-placeholder {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 100%;
          height: 100%;
          background-color: #f5f7fa;
          
          i {
            font-size: 20px;
            color: #dcdfe6;
          }
        }
      }
      
      .item-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 3px 0;
        
        .item-name {
          font-size: 13px;
          color: #303133;
          margin-bottom: 3px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        
        .item-price {
          display: flex;
          align-items: center;
          
          .current-price {
            font-size: 13px;
            font-weight: 500;
            color: #f56c6c;
          }
          
          .original-price {
            font-size: 11px;
            color: #909399;
            text-decoration: line-through;
            margin-left: 8px;
          }
        }
      }
      
      .item-actions {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-end;
        padding: 3px 0;
        
        .quantity-control {
          display: flex;
          align-items: center;
          
          .item-quantity {
            width: 24px;
            text-align: center;
            font-size: 13px;
          }
          
          .el-button {
            padding: 4px;
            font-size: 12px;
          }
        }
        
        .el-button {
          padding: 4px;
          font-size: 12px;
        }
      }
    }
  }
  
  .cart-summary {
    padding: 10px 15px;
    background-color: #f5f7fa;
    border-radius: 4px;
    margin: 8px 15px;
    
    .summary-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      .summary-label {
        color: #606266;
        font-size: 13px;
      }
      
      .summary-value {
        font-size: 13px;
        color: #303133;
        
        &.discount {
          color: #f56c6c;
        }
        
        &.total {
          font-size: 16px;
          font-weight: 500;
          color: #f56c6c;
        }
      }
    }
    
    .discount-row {
      .discount-input {
        display: flex;
        align-items: center;
        
        .el-input-number {
          width: 90px;
        }
        
        .discount-unit {
          margin-left: 5px;
          color: #606266;
        }
      }
    }
    
    .summary-divider {
      height: 1px;
      background-color: #dcdfe6;
      margin: 8px 0;
    }
    
    .total-row {
      margin: 10px 0 5px;
      
      .summary-label {
        font-size: 14px;
        font-weight: 500;
      }
    }
  }
}
</style> 